<!DOCTYPE html>
<div class="quanju">
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<!-- width：控制 viewport 的大小，可以指定的一个值，如果 600，或者特殊的值，如 device-width 为设备的宽度。
height：和 width 相对应，指定高度。
initial-scale：初始缩放比例，也即是当页面第一次 load 的时候缩放比例。
缩放是相对于ideal viewport来进行缩放的
maximum-scale：允许用户缩放到的最大比例。
minimum-scale：允许用户缩放到的最小比例。
user-scalable：用户是否可以手动缩放。
布局视区，可视视区，理想视区-->
 <meta charset="utf-8">
 <title>html+css</title>
    <link rel="stylesheet" type="text/css" href="css.css"/>
 <link rel="stylesheet" type="text/css" href="file://10.11.5/Users/mc/Desktop/css.css"/>
</head> 
    <ul class="imagemosaic">
        <li class="a"><a href="#home"></a></li>
        <li class="b"><a href="#home"></a></li>
        <li class="c"><a href="#home"></a></li>
     </ul>
<body><div class="nav">
<ul class="navigation"><li><a href="">Home</a></li>
<li><a href="">News</a></li>
<li><a href="">Content</a></li>
<li><a href="">User</a></li></ul></div>
<ul class="navi">
<li><a href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>
<ul class="v">
<li><a href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>   
        <div class="dp">
        <button class="btn">下拉列表</button>
        <div class="dpcon">
            <a href="test.html">情怀手机</a>
            <a href="test.html">情怀手机</a>
            <a href="test.html">情怀手机</a>
            <a href="test.html">情怀手机</a>
            </div></div>

<div class="dropdown">       
<img  class="im" src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1140958647,2055517506&fm=116&gp=0.jpg">
<div class="dropdownimg">  <img src="http://www.qqjia.com/z/09/tu10292_19.jpg">
<p style="text-align:center;">下拉的图片</p></div></div>
<ul      class="nav-bar">
    <li><a href="#Homepage">主页</a></li>       
    <li><a href="#Novel">小说</a></li>       
    <li><a href="#Music">音乐</a></li> 
  <div   class="dropdown-user">
      <li  class="li-btn"><a href="#User">用户</a> </li>
    <div class="dropdown-list">
        <a href="#Login">登录</a>
        <a href="#Changepassword">改密</a>
        <a href="#Personaldata">个人资料</a>
    </div>
  </div>
</ul>
    <h1>关于图片透明/不透明<h1> 
     <img class="opacity"  src="http://img06.tooopen.com/images/20161123/tooopen_sy_187628854311.jpg" alt="opacity图片" style="width:50%;float:left;">
     <img class="opacity" src="http://img02.tooopen.com/images/20151228/tooopen_sy_152967398112.jpg" alt="透明图片" style="width:50%;">
<div class="background">
    <div class="box">
        <p class="content">人活到极致，一定是素，是淡。动若清风，静如秋水，心容世事而不争，意纳万物且自明，种种浮华过眼，犹如石沉大海，瞬间融合于宽和的心境之中，无论是栖居闹市还是深山，皆可收放自如，觅得身心的清凉。世人眼中的神仙也莫过于此，境感万物，意通山水，幸甚至哉。
        </p>
    </div>
     </div>
    
<h1 class="FQH">凤求凰</h1>
<p class="FQH">一张机，沐雪园中竹枝密，青石台上少年依，一袭白衣，用计千里，渺渺洛阳笛。</p>   
<p class="FQH">两张机，半世流离谁人记，倚马千言才可惜，古雅风仪，不离不弃，情深知几许？</p>
<p class="FQH">三张机，王谢堂前双燕栖，旧巷依然称乌衣，洒脱不羁，去留无意，木屐作薄礼。</p> 
<p class="FQH">四张机，紫袍轻缓纱曳地，银镯天书隐袖衣，身若琉璃，止水涟漪，魂魄归故里。</p>
<p class="FQH">五张机，江陵城外无名溪，无名溪畔独钓鱼，世外游离，亦友亦敌，逍遥惟此人。</p> 
<p class="FQH">六张机，凤眸狭长是废帝，声声阿姐如往昔，裘氅暖意，五年流离，爱恨皆消弭。</p>
<p class="FQH">七张机，翩翩蓝衣佳公子，一曲千金人络绎，弦断三续，心伤无医，知音何处觅？</p> 
<p class="FQH">八张机，美人绝世柔香腻，容姿无双貌婉丽，暗伪死迹，自毁不惜，足以受一礼。</p>
<p class="comments">注释：</p>
<p id="zsst">乐府琴曲名。因司马相如求卓文君诗中有“凤兮凤兮归故乡，遨游四海求其凰”句而得名。</p>
<p class="border">css边框属性</p>
<h2>春衫落花两不惊</h2>
<p class="test">千红成烬一梦方醒</p>
<p class="inline">what</p>
<p class="inline">are</p>
<p class="inline">you</p>
<span class="block">I</span>
<span class="block">am</span>
<span class="block">sorry</span>
<table>
<caption>中国经典古诗词</caption>
<tr><th>静夜诗</th><th>李白</th><tr/>
<tr class="alt"><td>床前明月光</td><td>疑似地下霜</td><tr/>
<tr><td>举头望明月</td><td>低头思故乡</td></tr>
<tr><th>悯农</th><th>李绅</th></tr>
<tr class="alt"><td>锄禾日当午</td><td>汗滴禾下土</td></tr>
<tr class="collapse"><td>谁知盘中餐</td><td>粒粒皆辛苦</td></tr>
</table>
<div class="overflow"><p class="overflow">这年月已悄悄的过去，月光常常常到故里。花谢花飞飞满天，手把花锄落花田。</p></div>
<img class="one" src="http://img3.imgtn.bdimg.com/it/u=2877198694,2084293191&fm=23&gp=0.jpg">
        <div class="parent"><a target="_blank" href="http://www.baidu.com"><img class="two"src="http://img03.store.sogou.com/app/a/10010016/efff56af09a1361f73737675b3fee539"></a>
<img class="three" src="http://img02.store.sogou.com/app/a/10010016/debcfa5fbc02ae098fce38de1550769a">
    <img class="four" src="http://img03.store.sogou.com/app/a/10010016/aaf74837a0c2241bbe2fd44acc3de237" width="200px" height="180px"></div>
<p class="select">红茶属于( )茶。</p>
<ul class="a">
<li>半发酵</li>
<li>发酵</li>
<li>不发酵</li>
<li>微发酵</li>
</ul>
<ol class="b" start="3">
<li>半发酵</li>
<li>发酵</li>
<li>不发酵</li>
<li>微发酵</li>
</ol>
<ul class="c">
<li>半发酵</li>
<li>发酵</li>
<li>不发酵</li>
<li>微发酵</li>
</ul>
<img class="float" src="http://img4.imgtn.bdimg.com/it/u=1848210358,2623195360&fm=23&gp=0.jpg">
<div class="span">
<!--    cursor光标 -->
<span style="cursor:auto">auto 默认，浏览器设置的光标</span>
<span style="cursor:crosshair">crosshair 十字线光标</span>
<span style="cursor:default">default 默认光标通常为一个箭头</span>
<span style="cursor:help">help 显示为问号</span>
<span style="cursor:move">move 此对象指示目标可移动</span>
<span style="cursor:pointer">pointer 指示链接的指针（一只手）</span>
<span style="cursor:progress">progress 下载过程的光标</span>
<span style="cursor:text">text 此光标指示文本</span>
<span style="cursor:wait">wait 等待</span>
<span style="cursor:e-resize">e-resize 向东的箭头</span>
<span style="cursor:n-resize">n-resize 向北的箭头</span>
<span style="cursor:s-resize">s-resize 向南的箭头</span>
<span style="cursor:w-resize">w-resize 向西的箭头</span>
<span style="cursor:ne-resize">ne-resize 箭头朝右上</span>
<span style="cursor:nw-resize">nw-resize 箭头朝左上</span>
<span style="cursor:se-resize">se-resize 箭头朝右下</span>
<span style="cursor:sw-resize">sw-resize 箭头朝左下</span>
</div>
<h2>English</h2>
<p class="it">it's very beautiful</p>
<p class="for">For a long time it seemed to me that life was about to begin, real life.</p>
<p class="for2">For a long time it seemed to me that life was about to begin, real life.</p>
<h2>文言文</h2>
<div class="text-indent" id="home"> 
<p>听说北国在下雪，眼前忽地一亮，心里头暖洋洋的，因为心里老想着北方下雪后大冶的雪也为期不远了。</p>
<p>可是我用足够的耐心等了一个冬天，主人迟迟未到，等的结果让我大失所望。是骄傲的雪不守信用还是冬没有发出英雄请柬？偶见北风吹雁，不见纷飞白雪，难见前路知己，谁人又能识君？不见漫天扬玉蝶，谁呼苍天散花人呀？有人说是冬负了雪，有人说是雪背叛了冬。我却刻意用一丘之貉、狼狈为奸去解读它们。如果哪天冬远离雪，就算世界总是温暖如春，幸福的意义和痛苦的意义都会变味</p></div>
<div class="divfloat"><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1487878459422&di=f08afafd1c73ccdf435e2a3c70e10fd6&imgtype=0&src=http%3A%2F%2Fimg.lenovomm.com%2Fcrawler%40cluster-1%2Fams%2Ffileman%2Fimg%2Ficon%2F2015-03-25122058-_1427257258695_8012.png" width="100px" height="100px"  >
<br>文言文 
</div>

 <span class="wen">文</span><p class="wyw">言文是中国古代的一种书面语言，<img class="w3c" src="http://www.w3cschool.cn/statics/images/w3c/logo.png">主要包括以先秦时期的口语为基础而形成的书面语。春秋战国时期，用于记载文字的物品还未被发明，记载文字用的是竹简、丝绸等物，而丝绸价格昂贵、竹简笨重且记录的字数有限，为能在“一卷”竹简上记下更多事情，就需将不重要的字删掉。后来当“纸”大规模使用时，统治阶级的来往“公文”使用习惯已经定型，会用“文言文”已经演变成读书识字的象征。20世纪之后，在中国，文言文的地位逐渐被白话文取代。文言文是相对白话文而来的，其特征是以文字为基础来写作，注重典故、骈骊对仗、音律工整且不使用标点，包含策、诗、词、曲、八股、骈文古文等多种文体。现代书籍中的文言文，为了便于阅读理解，一般都会对其标注标点符号。著名语言文学家、教育家王力先生在《古代汉语》中指出：“文言是指以先秦口语为基础而形成的上古汉语书面语言以及后来历代作家仿古的作品中的语言”。文言文，也就是用文言写成的文章，即上古的文言作品以及历代模仿它的作品。文言文作为一种定型化的书面语言，沿用了两三千年，从先秦诸子、两汉辞赋、史传散文，到唐宋古文、明清八股……都属于文言文的范围。也就是说，文言文是中国古代的书面语言，是现代汉语的源头。[2]
第一个“文”字，是美好的意思。“言”字，是写、表述、记载等的意思。“文言”两字，即书面语言，是相对于“口头语言”而言，在中国古代长期占据统治地位。五四运动以后，白话文才取得正式书面语的资格。 最后一个“文”字，是作品、文章等的意思，表示的是文种。
“文言文”的意思就是指“美好的语言文章”也叫做语体文。而“白话文”的意思就是：“使用常用的直白的口头语言写成的文章”。比如像说，“你吃饭了吗？”。

在我国古代，要表述同一件事，用“口头语言”（口语）、“书面语言”（书面语）来表述，是不同的，比如，想问某人是否吃饭了，用口头语言表述，是“吃饭了吗？”，而用书面语言进行表述，却是“饭否？”。“饭否”就是文言文，这里，“饭”名词作动词用，意思为吃饭。

中国在1918年以前，所有的文章都是用文言文书面语言写成的。现当代我们一般将“古文”称为“文言文”。

在中华数千年历史中，语言的口语变化非常大，可是文言文却保持相近的格式。文言文能让不同语言使用者“笔谈”，是一种具有固定格式、却不会非常困难的沟通方法。著名语言文学家、教育家王力先生在《古代汉语》中指出：“文言是指以先秦口语为基础而形成的上古汉语书面语言以及后来历代作家仿古的作品中的语言”。文言文，也就是用文言写成的文章，即上古的文言作品以及历代模仿它的作品。文言文作为一种定型化的书面语言，沿用了两三千年，从先秦诸子、两汉辞赋、史传散文，到唐宋古文、明清八股……都属于文言文的范围。也就是说，文言文是中国古代的书面语言，是现代汉语的源头。[2]

第一个“文”字，是美好的意思。“言”字，是写、表述、记载等的意思。“文言”两字，即书面语言，是相对于“口头语言”而言，在中国古代长期占据统治地位。五四运动以后，白话文才取得正式书面语的资格。 最后一个“文”字，是作品、文章等的意思，表示的是文种。

“文言文”的意思就是指“美好的语言文章”也叫做语体文。而“白话文”的意思就是：“使用常用的直白的口头语言写成的文章”。比如像说，“你吃饭了吗？”。

在我国古代，要表述同一件事，用“口头语言”（口语）、“书面语言”（书面语）来表述，是不同的，比如，想问某人是否吃饭了，用口头语言表述，是“吃饭了吗？”，而用书面语言进行表述，却是“饭否？”。“饭否”就是文言文，这里，“饭”名词作动词用，意思为吃饭。

中国在1918年以前，所有的文章都是用文言文书面语言写成的。现当代我们一般将“古文”称为“文言文”。

在中华数千年历史中，语言的口语变化非常大，可是文言文却保持相近的格式。文言文能让不同语言使用者“笔谈”，是一种具有固定格式、却不会非常困难的沟通方法。著名语言文学家、教育家王力先生在《古代汉语》中指出：“文言是指以先秦口语为基础而形成的上古汉语书面语言以及后来历代作家仿古的作品中的语言”。文言文，也就是用文言写成的文章，即上古的文言作品以及历代模仿它的作品。文言文作为一种定型化的书面语言，沿用了两三千年，从先秦诸子、两汉辞赋、史传散文，到唐宋古文、明清八股……都属于文言文的范围。也就是说，文言文是中国古代的书面语言，是现代汉语的源头。[2]

第一个“文”字，是美好的意思。“言”字，是写、表述、记载等的意思。“文言”两字，即书面语言，是相对于“口头语言”而言，在中国古代长期占据统治地位。五四运动以后，白话文才取得正式书面语的资格。 最后一个“文”字，是作品、文章等的意思，表示的是文种。

“文言文”的意思就是指“美好的语言文章”也叫做语体文。而“白话文”的意思就是：“使用常用的直白的口头语言写成的文章”。比如像说，“你吃饭了吗？”。

在我国古代，要表述同一件事，用“口头语言”（口语）、“书面语言”（书面语）来表述，是不同的，比如，想问某人是否吃饭了，用口头语言表述，是“吃饭了吗？”，而用书面语言进行表述，却是“饭否？”。“饭否”就是文言文，这里，“饭”名词作动词用，意思为吃饭。

中国在1918年以前，所有的文章都是用文言文书面语言写成的。现当代我们一般将“古文”称为“文言文”。

在中华数千年历史中，语言的口语变化非常大，可是文言文却保持相近的格式。文言文能让不同语言使用者“笔谈”，是一种具有固定格式、却不会非常困难的沟通方法。著名语言文学家、教育家王力先生在《古代汉语》中指出：“文言是指以先秦口语为基础而形成的上古汉语书面语言以及后来历代作家仿古的作品中的语言”。文言文，也就是用文言写成的文章，即上古的文言作品以及历代模仿它的作品。文言文作为一种定型化的书面语言，沿用了两三千年，从先秦诸子、两汉辞赋、史传散文，到唐宋古文、明清八股……都属于文言文的范围。也就是说，文言文是中国古代的书面语言，是现代汉语的源头。[2]

第一个“文”字，是美好的意思。“言”字，是写、表述、记载等的意思。“文言”两字，即书面语言，是相对于“口头语言”而言，在中国古代长期占据统治地位。五四运动以后，白话文才取得正式书面语的资格。 最后一个“文”字，是作品、文章等的意思，表示的是文种。

“文言文”的意思就是指“美好的语言文章”也叫做语体文。而“白话文”的意思就是：“使用常用的直白的口头语言写成的文章”。比如像说，“你吃饭了吗？”。
</p>
    <p style="text-align:left;font-size:40px;font-weight:bold">图片浮动</p>
<img class="floattest" src="http://img3.imgtn.bdimg.com/it/u=3939038791,4140945528&fm=23&gp=0.jpg" width="200px" height="200px">    
<img class="floattest" src="http://img5.imgtn.bdimg.com/it/u=1593952318,1840461805&fm=23&gp=0.jpg" width="200px" height="200px">    
<img class="floattest" src="http://img2.imgtn.bdimg.com/it/u=184633658,1120776942&fm=23&gp=0.jpg" width="200px" height="200px">    
<img class="floattest" src="http://img0.imgtn.bdimg.com/it/u=1645876080,3559744942&fm=23&gp=0.jpg" width="200px" height="200px">    
<p class="clear" style="text-align:left;">鬼知道你麻痹浮动个🔨啊</p>
<img class="floattest" src="http://img0.imgtn.bdimg.com/it/u=2865229733,2101842971&fm=23&gp=0.jpg" width="200px" height="200px">    
<img class="floattest" src="http://img3.imgtn.bdimg.com/it/u=609258159,3054360384&fm=23&gp=0.jpg" width="200px" height="200px">    
<img class="floattest" src="http://img2.imgtn.bdimg.com/it/u=846802288,2375830894&fm=23&gp=0.jpg" width="200px" height="200px">    
<img class="floattest" src="http://img1.imgtn.bdimg.com/it/u=597808483,2939381712&fm=23&gp=0.jpg" width="200px" height="200px">    
<div class="container">
    <div class="header"><h1>十万个套路</h1></div>
        <div class="left"><p>套路是怎样练成的</p></div>
    <div class="right"><ul><li>多看书勤看报</li><li>善于思考</li><li>长于观察</li><li>多做经验总结</li><li>内涵段子</li></ul></div>
    <div class="foot"><p style="color:white;">我走过最长的路就是你的套路</p></div>     </div>
    <p class="center">春归何处。寂寞无行路。若有人知春去处。唤取归来同住。 春无踪迹谁知。除非问取黄鹂。百啭无人能解，因风飞过蔷薇。</p>
        <div class="parent"> <p class="absolute">风乍起，吹皱一池春水。闲引鸳鸯香径里，手挼红杏蕊。斗鸭阑干独倚，碧玉搔头斜坠。终日望君君不至，举头闻鹊喜。</p></div><br>
       <p class="align1"><br>往事只堪哀，对景难排。秋风庭院藓侵阶。一任珠帘闲不卷，终日谁来。金锁已沉埋，壮气蒿莱。晚凉天净月华开。想得玉楼瑶殿影，空照秦淮。</p>
<h1>Welcome to My Homepage</h1>
<div class="selector">
<h2>My name is Donald</h2>
<p>I live in Duckburg.</p>
</div><div class="selector2">
<p>My best friend is Mickey.</p>
<span><p>I will not be styled.</p></span></div>
        <p>相邻兄弟选择器</p>
        <p>普通相邻兄弟选择器</p>
        <h4>普通相邻兄弟选择器</h4>
        <p>what<span>are</span>you<span>弄</span>啥呢</p>
        <form>账号:<input class="zhanghao" type="number" name="zhanghao"><br/>
密码:<input type="password" name="mima"></form>
        <p class="i" lang="en">这天真的很冷</p>
        <p class="firstline">1v5<br/>来四个会喊666的咸鱼<p>
        <p class="before">高地被推，这波不亏</p>
        <p class="after">基地爆炸，问题不大</p>
        <div class="button-group"></div>
    </body>
    </html></div>